<template>
  <a-card :bordered="false">
    <a-button size="small" type="primary" class="mb-5" @click="onEdit({})">添加角色</a-button>
    <s-table
      ref="table"
      rowKey="roleId"
      :columns="columns"
      :data="loadData"
    >
      <span slot="action" slot-scope="text, record">
        <template>
          <a @click="onEditMenu(record)">分配菜单</a>
          <a-divider type="vertical" />
          <a @click="onEdit(record)">编辑</a>
          <a-divider type="vertical" />
          <a @click="onDel(record)">删除</a>
        </template>
      </span>
    </s-table>

    <a-modal
      :title="`${roleInfo.roleId?'编辑':'添加'}角色`"
      :dialogStyle="{top:'10px'}"
      :visible="roleInfoModal"
      :confirm-loading="confirmLoading"
      @cancel="roleInfoModal=false"
      @ok="onCommitRole"
    >
      <a-form-model
        ref="ruleForm"
        layout="horizontal"
        :model="roleInfo"
        :rules="roleRules"
        :labelCol="{span:5}"
        :wrapperCol="{span:16}">
        <a-form-model-item label="角色名称" prop="roleName">
          <a-input v-model="roleInfo.roleName" />
        </a-form-model-item>
        <a-form-model-item label="备注" prop="remarks">
          <a-input v-model="roleInfo.remarks" />
        </a-form-model-item>
        <a-form-model-item label="是否有效" v-if="roleInfo.roleId">
          <a-radio-group name="radioGroup" v-model="roleInfo.enableFlag" :default-value="true">
            <a-radio :value="1">是</a-radio>
            <a-radio :value="0">否</a-radio>
          </a-radio-group>
        </a-form-model-item>
      </a-form-model>
    </a-modal>

  </a-card>
</template>

<script>

const columns = [
  {
    title: '角色名称',
    dataIndex: 'roleName',
    align: 'center'
  },
  {
    title: '备注',
    dataIndex: 'remarks',
    align: 'center'
  },
  {
    title: '更新时间',
    dataIndex: 'updateTime',
    width: '150px',
    align: 'center'
  },
  {
    title: '修改人',
    dataIndex: 'updateBy',
    width: '100px',
    align: 'center'
  },
  {
    title: '是否有效',
    dataIndex: 'enableFlag',
    align: 'center',
    width: '100px',
    customRender: (text) => {
      return text === 1 ? '是' : '否'
    }
  },
  {
    title: '操作',
    align: 'center',
    dataIndex: 'action',
    width: '200px',
    scopedSlots: { customRender: 'action' }
  }
]
export default {
  name: 'RoleList',
  components: {

  },
  data () {
    this.columns = columns
    return {
      loadData: parameter => {
        const { pageNo, pageSize } = parameter
        // return getRolePage(pageNo, pageSize, {}).then(response => {
        //   return response.data
        // })
      },
      roleInfoModal: false,
      menuModal: false,
      roleInfo: {
        roleName: '',
        remarks: '',
        type: '',
        enableFlag: 1
      },
      confirmLoading: false,
      roleRules: {
        roleName: [
          { required: true, message: '请输入角色名称', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (value.replace(/\s/g, '') === '') {
                callback(new Error('请输入角色名称'))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ]
        // type: [
        //   { required: true, message: '请选择类型', trigger: 'blur' }
        // ]
      }
    }
  },
  methods: {
    onCommitRole () {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.confirmLoading = true
          const form = { ...this.roleInfo }
          if (form.roleId) {
            editRole(form).then(() => {
              this.$message.success('编辑角色成功')
              this.roleInfo = {}
              this.roleInfoModal = false
              this.$refs.table.refresh(false)
            }).finally(() => {
              this.confirmLoading = false
            })
          } else {
            addRole({ ...form, enableFlag: 1 }).then(() => {
              this.$message.success('添加角色成功')
              this.roleInfo = {}
              this.roleInfoModal = false
              this.$refs.table.refresh(true)
            }).finally(() => {
              this.confirmLoading = false
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    onEdit (record) {
      this.roleInfo = record
      this.roleInfoModal = true
    },
    onEditMenu (record) {
      this.roleInfo = record
      this.menuModal = true
    },
    onDel (record) {
      const that = this
      this.$confirm({
        title: '系统提示',
        content: `确定删除${record.roleName}吗？`,
        onOk () {
          deleteRoleById(record.roleId).then(() => {
            that.$message.success('删除成功')
            that.$refs.table.refresh(false)
          })
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
